<script setup lang="ts">
import { ref } from "vue";

const play =  ref('🏀')

const changeFood =()=>{
  play.value += '🐂'
} 

const changeFoods =(food:string)=>{
  play.value += food
} 

const testEvent = (e:any ,info:string)=>{
  console.log(e)
  console.log(info)
}

</script>



<template>
<!-- 内联函数 -->
<!-- <h1 v-on:click = "play+='🏀'"> 内联语句 直接写逻辑语句就行 </h1> -->
<h1 @click="play+='🏀'">{{ play }}</h1>
<!-- v-on 简写  @  -->


<!-- 处理函数 -->
<h1 @click="changeFood">处理函数-适合写一些负责的逻辑</h1>

<!-- 调用函数 + 传递参数 -->
<h1 @click="changeFoods('🐏')">吃饭</h1>


<!-- 默认的事件参数 -->
<!-- 事件触发时 浏览器就默认传递一个 事件参数 内部有很多有用的参数 -->
<!-- 触发事件时候 如果纪要获取默认的事件参数  又要传递自定义的参数 -->
<!-- 可以使用 $event 代替默认的参数 -->

<button @click="testEvent($event,'🐕')">测试事件参数</button>
</template>



<style scoped>
div img{
  width: 200px;
  height: 200px;
}
</style>